<template>
	<view :style="{ '--color': color }">
		<navBar :bgColor="bgColor" :transparent="transparent" :color="navColor"></navBar>
		<image :src="$imgUrls(info.img)" mode="widthFix" class="rows"></image>

		<view class="Tab">
			<u-tabs
				:list="list1"
				@click="Tabclick"
				:scrollable="false"
				lineColor="#000"
				:current="mine"
				:inactiveStyle="inactiveStyle"
				:activeStyle="activeStyle"
				:itemStyle="itemStyle"
				:lineHeight="2"
				:lineWidth="22"
			></u-tabs>
		</view>

		<view class="Crad" @click="toUrl(`cardDetails?id=${item.id}`)" v-for="(item, index) in pageData" :key="index">
			<view class="Crad-Top">
				<view class="Store" v-if="item.store_list">
					<view class="StoreBox" v-for="(subItem, subIndex) in item.store_list" :key="subIndex">
						<image :src="$imgUrls(subItem.logo)" mode="aspectFill" class="StoreImg"></image>
					</view>
				</view>
				<text class="storeName">{{ item.store_desc }}</text>
				<view class="iconfont icon-a-zujian32 color_33 h7 m-left10"></view>
			</view>
			<view class="Crad-wrapper">
				<view class="flex-1 d-flex a-center m-right30">
					<image :src="$imgUrls(item.logo)" mode="aspectFill" class="warpper-box_logo"></image>
					<view class="d-flex f-column">
						<text class="ellipsis black size28">{{ item.name }}</text>
						<text class="ellipsis_2 color_99 m-top8">{{ item.desc }}</text>
					</view>
				</view>
				<view class="d-flex f-column a-center">
					<view class="transact">办理</view>
					<text class="color_66 h6 m-top10">已售：{{ item.sales }}份</text>
				</view>
			</view>
		</view>

		<emptys v-if="!pageData.length"></emptys>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			bgColor: 'transparent',
			transparent: false,
			navColor: 'white',
			headImg: 'https://msraimgcdn.mogoie.com/6099/1691810360037.jpg',
			list1: [
				{
					name: '办卡'
				},
				{
					name: '我的卡包'
				}
			],

			info: '',
			pageData: [],
			StoreImg: [
				'https://msraimgcdn.mogoie.com/6099/1691810360037.jpg',
				'https://msraimgcdn.mogoie.com/6099/1691738405248.png',
				'https://msraimgcdn.mogoie.com/6099/1701402213965.jpg'
			],
			mine: 0
		};
	},

	onShow() {
		this.mine = 0;
		this.timeCardList();
	},
	methods: {
		timeCardList() {
			this.$http
				.get({
					url: '/TimeCardApi/newTimeCardList',
					data: {
						mine: this.mine
					}
				})
				.then((res) => {
					if (res.code != 200) return this.$Toast(res.msg);
					const result = res.data;
					this.info = result.info;
					this.pageData = result.list || [];
				});
		},
		Tabclick(e) {
			this.mine = e.index;
			if (e.index == 1) return this.toUrl(`cardBags`);
		}
	},
	computed: {
		...mapState(['color']),
		inactiveStyle() {
			return {
				fontSize: '28rpx',
				color: '#333333'
			};
		},
		activeStyle() {
			return {
				fontSize: '30rpx',
				color: '#000000'
			};
		},
		itemStyle() {
			return {
				height: '38px'
			};
		}
	},
	watch: {
		headImg: {
			immediate: true,
			handler(newVal) {
				if (newVal) {
					this.transparent = false;
					this.navColor = 'white';
				} else {
					this.transparent = true;
					this.navColor = 'black';
				}
			}
		}
	}
};
</script>

<style>
page {
	background-color: #f2f2f2;
}
</style>
<style lang="scss" scoped>
.Tab {
	width: 100%;
	margin: 0 auto;
	padding: 20rpx 70rpx;
}

.Crad {
	width: 690rpx;
	background-color: #ffffff;
	padding: 24rpx 24rpx 36rpx 24rpx;
	border-radius: 10rpx;
	margin: 0 auto 24rpx;

	&-Top {
		width: 100%;
		display: flex;
		align-items: center;

		.Store {
			display: flex;
			align-items: center;
			margin-right: 20rpx;

			.StoreBox {
				width: 52rpx;
				height: 52rpx;
				background-color: #ffffff;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				margin-left: -26rpx;

				.StoreImg {
					width: 44rpx;
					height: 44rpx;
					border-radius: 50%;
				}
			}

			.StoreBox:first-child {
				margin-left: 0 !important;
			}
		}

		.storeName {
			color: #333;
			font-size: 26rpx;
		}
	}

	&-wrapper {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 24rpx;

		.warpper-box_logo {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			flex-shrink: 0;
			display: block;
		}

		.transact {
			width: 154rpx;
			height: 62rpx;
			background-color: var(--color);
			border-radius: 10rpx;
			color: #fff;
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
